<template>
  <view class="disFlx relative time-line mb-8">
    <view class="absolute left-0 top-0 w-20 h-full disFlxCC" :style="{ justifyContent: isEnd ? 'flex-start' : 'center' }">
      <view class="w-20 h-20 linh-20 fontTC mb-8">
        <text class="ali-icon fz-20" :style="{ color: getColor }">&#xe6d1;</text>
      </view>
      <view v-if="!isEnd" class="w-1 flex-1" :style="{ backgroundColor: getColor }"></view>
    </view>
    <view class="ml-32 pb-16">
      <slot />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { type PropType, computed } from 'vue';

  const props = defineProps({
    state: {
      type: String as PropType<'success' | 'waiting' | 'error'>,
      default: 'waiting',
    },
    isEnd: propTypes.bool.def(false),
  });

  const getColor = computed(() => {
    switch (props.state) {
      case 'success':
        return '#2878ff';
      case 'error':
        return '#EA5E0E';
      default:
        return '#C8CACC';
    }
  });
</script>

<style lang="scss" scoped>
  .time-line {
    min-height: 188rpx;
  }
</style>
